<template>
  <div id="userList">
    <div class="sech clearfix" :UserListData="UserListData">
      <div class="left" style="width: 50%;margin-bottom: 25px;" :updateStatusData="updateStatusData">
        <el-input class="saechIput"  v-model="companyName" :placeholder="languageData.public.commitName"></el-input>
        <el-button type="primary" class="saechBout"  icon="el-icon-search" v-on:click="saechFn(1)"> </el-button>
      </div>
      <div class="right" style="width: 50%;text-align: right">
        <!--<el-button size="medium" class="bot" icon="el-icon-delete">删除</el-button>-->
        <!--<el-button size="medium" class="bot" icon="el-icon-document">导出excel</el-button>-->
        <!--<el-button size="medium" type="primary" class="bot check" icon="el-icon-plus">批量导入</el-button>-->
      </div>
      <div class="tableBox">
        <el-dialog :title="languageData.admin.ResetPassword" :visible.sync="dialogFormVisible" style="text-align: left">
          <el-form :label-position="labelPosition" :label-width="languageData.id=='Chinese'?'100px':'150px'" :model="fromData" :rules="languageData.id=='Chinese'?rules:rules2" ref="fromData">
            <el-form-item :label="languageData.from.label.NewPassword" prop="password">
              <el-input v-model="fromData.password" type="password"></el-input>
            </el-form-item>
            <el-form-item :label="languageData.from.label.confirmPassword" prop="passwordTow">
              <el-input v-model="fromData.passwordTow" type="password"></el-input>
            </el-form-item>
            <el-form-item label="">
              <div style="text-align: right">
                <el-button @click="resetFields()">{{languageData.public.cancel}}</el-button>
                <el-button type="primary" @click="submitForm('fromData')">{{languageData.public.done}}</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" :row-style="style1"  :header-row-style="style2">
          <el-table-column prop="da" label=" " width="20">
          </el-table-column>
          <el-table-column prop="name" :label="languageData.public.commitName" >
          </el-table-column>
          <el-table-column prop="deviceTotal" :label="languageData.public.containerTotal" >
          </el-table-column>
          <el-table-column prop="useTotal" :label="languageData.public.Using" >
          </el-table-column>
          <el-table-column prop="unuseTotal" :label="languageData.public.Unused" >
          </el-table-column>
          <el-table-column prop="creatTmie" :label="languageData.admin.Details" width="180">
            <template slot-scope="scope">
              <!--订单详情-->
              <span @click="goChart(scope.row,'davisAnanysist')" class="ditles" >{{languageData.admin.oderChart}} </span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="cleae" style="text-align: right;padding-right: 20px;padding-top: 20px;margin-bottom: 40px">
        <el-pagination layout="prev, pager, next" :page-count="page.count" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="languageData.admin.DeleteAccount" :visible.sync="dialogVisible2" width="30%" ><span>{{languageData.admin.DeleteAccount}}?</span><span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">{{languageData.public.cancel}}</el-button>
    <el-button type="primary" @click="delFn">{{languageData.public.done}}</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .ditles{margin-right: 20px;color: #00a2d4;cursor: pointer}
  #userList{max-width: 1690px;padding-top: 25px;text-align: left}
  .saechIput{width: 392px;margin-right: 0px;position: relative;z-index: 10;border: none 0px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 60px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .bot{ width: 120px;text-align: center}
  .check{background-color: #0d71b7;margin-right: 60px;}
  .success-row {  background: #d9dddd;  }
  .tableBox{width: 100%;min-height: 200px;margin-top: 25px;}
  .clickBot{cursor: pointer;}
  .clickBot:hover{color:#409eff }

</style>
<script>
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import {mapState, mapActions} from 'vuex'
  import Public from '../../vuex/public.js'
  export default {
    name: 'my-usrList',
    data () {
      // 自定义密码校验
      var indeofPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.fromData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var indeofPassword2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('confirm password'));
        } else if (value !== this.fromData.password) {
          callback(new Error('Your new passwords do not match!'));
        } else {
          callback();
        }
      };
      return {
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员'
        },
        userSaech: null,
        page:{
          page: 1,
          pageSize: 10,
          count: 1
        },
        dialogFormVisible: null,
        dialogVisible2: false,
        tableData2: [{
          userId: 'No Data',
          account: 'No Data',
          companyName: 'No Data',
          creatTmie: 'No Data'
        }],
        style1: {height: '70px'},
        style2: {height: '70px', border: 'none 0px', background: '#d9dddd', 'margin-top': '25px'},
        companyName:'',
        fromData: {
          userId: null,
          password: null,
          passwordTow: null
        },
        rules: {
          password: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
          ],
          passwordTow: [
            { required: true, message: '请确认新密码', trigger: 'blur' },
            { validator: indeofPassword, trigger: 'blur' }
          ]
        },
        rules2: {
          password: [
            { required: true, message: 'Please confirm your new password', trigger: 'blur' },
          ],
          passwordTow: [
            { required: true, message: 'confirm password', trigger: 'blur' },
            { validator: indeofPassword2, trigger: 'blur' }
          ]
        },
        labelPosition: 'left'
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        statisticsCompanyDevice: 'statisticsCompanyDevice',
        resetPassword: 'resetPassword',
        updateLevel:'updateLevel'
      }),
      goChart(row,name){
        //console.log(row.companyId)
        this.$router.push({ name:name ,query: {id: row.companyId,companyName:row.name}})
      },
      tableRowClassName ({row, rowIndex}) {
        var x = rowIndex % 2
        if (x === 0) {
          return ''
        } else if (x === 1) {
          return 'success-row'
        }
        return ''
      },
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.saechFn()
      },
      login () {
        this.$router.push({ name: "map" })
      },
      saechFn(a){
        if(a){
          this.page.page = 1
        }
        var parm = {
          companyName:this.companyName,
          page: this.page.page,
          pageSize: this.page.pageSize,
        }
        this.statisticsCompanyDevice(parm)
      },
      // 解析公司统计分析列表
      userListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []

        for (let i in res) {
          var vue = true
          var pu = { //
            "companyId":res[i].companyId,
            "deviceTotal":res[i].deviceTotal,
            "name":res[i].name,
            "unuseTotal":res[i].unuseTotal,
            "useTotal":res[i].useTotal
          }
          this.tableData2.push(pu)
        }
      },
      // 操作
      handleEdit (index, row) {
        this.dialogFormVisible = true;
        this.fromData.password = ''
        this.fromData.passwordTow = ''
        this.fromData.userId = row.userId
      },
      // 取消
      resetFields(){
        this.dialogFormVisible = false;
        this.$refs['fromData'].resetFields()
      },
      // delUser
      delUserfn (index, row) {
        this.dialogVisible2 = true;
        this.fromData.userId = row.userId
      },
      upUserfn(row) {
        var parm = {
          id: row.userId,
          level: parseInt(row.value)
        }
        this.updateLevel(parm)
      },
      delFn(){
        var parm = {
          userId: this.fromData.userId
        }
        this.dialogVisible2 = false
        this.delUser(parm)
      },
      // 操作是否成功
      listStatus (res) {
        if (res.status == 0) {
          // 修改成功
          var text = '';
          if(res.code == 0){
            // 刷新列表
            text = this.languageData.id == 'Chinese'?'密码修改成功':'Password change successfully'
            this.fromData.password = ''
            this.fromData.passwordTow = ''
            this.openSuccess(text);
          }else {

            text = this.languageData.id == 'Chinese'?'删除账号成功':'Delete account successfully'
            if(res.code == 'updateLevel'){
              text = this.languageData.id == 'Chinese'?'设置成功':'updata successfully'
            }
            this.openSuccess(text);
            // 刷新列表
            var parm = {
              companyName:this.companyName,
              page: this.page.page,
              pageSize: this.page.pageSize,
            }
            this.statisticsCompanyDevice(parm);
          }
        }
        if (res.status != 0) {
          // 修改 修改失败
          var text = res.message
          if(res.code==-1){
            text = this.languageData.id == 'Chinese'?'密码修改失败':'Password change failed'
          }else {
            text = this.languageData.id == 'Chinese'?'删除账号失败':'Delete account failed'
          }
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 重置密码
      updatePaswordFn () {
        var parm = {
          userId: this.fromData.userId,
          password: this.fromData.password
        }
        this.resetPassword(parm);
        this.dialogFormVisible = false
      },
      // 表单验证按钮
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updatePaswordFn()
          } else {
            return false
          }
        })
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      }
    },
    computed: {
      UserListData: function () {
        var parm = this.statisticsCompanyDeviceList
        if (parm) {
          this.userListFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'addOderData',
        'language',
        'statisticsCompanyDeviceList',
        'updateStatus'
      ])
    },
    mounted () {
      // 配置顶部菜单
      var parm = {
        companyName: this.companyName,
        page: this.page.page,
        pageSize: this.page.pageSize,
      }
      this.statisticsCompanyDevice(parm)
    },
    components: {
    }
  }
</script>

